// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.

<template>
    <v-card variant="outlined" rounded="xlg" class="h-100">
        <div class="h-100 d-flex flex-column justify-space-between pa-8">
            <div>
                <div class="d-flex justify-center align-center ma-0">
                    <div>
                        <v-badge v-if="isPartner" label="Best Value" rounded="lg" content="Best Value" color="success">
                            <v-btn v-if="isPartner" density="comfortable" color="success" variant="outlined" icon>
                                <v-icon :icon="mdiCloudOutline" />
                            </v-btn>
                        </v-badge>

                        <v-btn v-else density="comfortable" color="grey-lighten-1" variant="outlined" icon>
                            <v-icon v-if="isPro" :icon="mdiStarOutline" />
                            <v-icon v-else :icon="mdiEarth" />
                        </v-btn>
                    </div>
                </div>

                <div class="py-4 text-center">
                    <p class="font-weight-bold">{{ plan.title }}</p>
                    <p>{{ plan.containerSubtitle }}</p>
                </div>

                <div class="py-4 text-center">
                    <p class="mb-3">{{ plan.containerDescription }}</p>
                    <!-- eslint-disable-next-line vue/no-v-html -->
                    <p v-if="plan.containerFooterHTML" v-html="plan.containerFooterHTML" />
                </div>
            </div>

            <div class="d-flex justify-center py-4">
                <v-btn
                    :variant="isFree ? 'outlined' : 'flat'"
                    :color="isPartner ? 'success' : isFree ? 'grey-lighten-1' : 'primary'"
                    @click="onActivateClick"
                >
                    <template #append>
                        <v-icon :icon="mdiArrowRight" />
                    </template>

                    {{ plan.activationButtonText || ('Activate ' + plan.title) }}
                </v-btn>
            </div>
        </div>
    </v-card>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { VBadge, VBtn, VCard, VIcon } from 'vuetify/components';
import { mdiArrowRight, mdiCloudOutline, mdiEarth, mdiStarOutline } from '@mdi/js';

import { PricingPlanInfo, PricingPlanType } from '@/types/common';

const props = defineProps<{
    plan: PricingPlanInfo;
}>();

const emit = defineEmits<{
    select: [PricingPlanInfo];
}>();

/**
 * Sets the selected pricing plan and displays the pricing plan modal.
 */
function onActivateClick(): void {
    emit('select', props.plan);
}

const isPartner = computed((): boolean => props.plan.type === PricingPlanType.PARTNER);
const isPro = computed((): boolean => props.plan.type === PricingPlanType.PRO);
const isFree = computed((): boolean => props.plan.type === PricingPlanType.FREE);
</script>
